import { useState, useEffect, useLayoutEffect } from "react"


// useLayoutEffect运行机制和useEffect是一样的
// 区别：useLayoutEffect执行时机更早，项目中用少。
//      useLayoutEffect不能进行ref或dom操作, 类似于vue中的beforeCreate

const A = props => {
  const [num, setNum] = useState(1)
  const [count, setCount] = useState(1)

  useEffect(() => {
    console.log("useEffect fn1...");
    return () => {
      console.log("useEffect fn2...");
    }
  }, [num])

  useLayoutEffect(() => {
    console.log("useLayoutEffect fn1...");
    return () => {
      console.log("useLayoutEffect fn2...");
    }
  }, [num])

  return (
    <div>
      <h2>函数式组件</h2>
      <h3>{num}</h3>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <hr />
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default A;
